<template>
    <div>
      <!-- 顶部 -->
      <van-sticky :offset-top='0'>
      <div class="header" v-if="this.$route.path === '/'">黑马商城.vant</div>
      <div class="header" v-if="this.$route.path === '/home'">黑马商城.vant</div>
      <div class="header" v-if="this.$route.path === '/addgoods'">黑马商城.vant</div>
      <van-nav-bar
        v-if="this.$route.path === '/contact'"
        title="黑马商城.vant"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-nav-bar
        v-if="this.$route.path === '/shopcar'"
        title="黑马商城.vant"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-nav-bar
        v-if="this.$route.path === '/member'"
        title="黑马商城.vant"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-nav-bar
        v-else-if="this.$route.path === '/search'"
        title="黑马商城.vant"
        left-text="返回"
        right-text="添加"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
      </van-sticky>
      <!-- 路由占位符 -->
      <transition>
      <router-view />
      </transition>
      <!-- 底部 -->
      <van-tabbar route v-model="active">
        <van-tabbar-item to="/home">
          <i slot="icon" class="iconfont icon-shouye"></i>
          <span>首页</span>
        </van-tabbar-item>
        <van-tabbar-item to="/search" icon="search">搜索</van-tabbar-item>
        <van-tabbar-item to="/shopcar" :info="$store.getters.count" icon="cart-o">购物车</van-tabbar-item>
        <van-tabbar-item to="/member" icon="setting-o">
          <i slot="icon" class="iconfont icon-zhanghao"></i>
          <span>会员</span>
        </van-tabbar-item>
      </van-tabbar>
    </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0
    }
  },

  created () {

  },

  methods: {
    // 点击返回按钮时触发
    onClickLeft () {
      this.$router.go(-1)
    },
    // 点击添加按钮时触发
    onClickRight () {
      this.$router.push('/addgoods')
    }
  }
}
</script>

<style scoped lang='less'>
.header{
  width: 100%;
  height: 50px;
  background: #1989fa;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 14px;
}
.van-nav-bar {
  background: #1989fa;
}
.van-nav-bar__title {
  color: #fff;
  font-size: 14px;
}
.van-icon-arrow-left::before, .van-nav-bar__text {
  color: #fff;
}
.v-enter{
        transform: translateX(50px);
        opacity: 0;
    }
.v-enter-active{
        transition: all 1s
    }
.v-enter-to{
        transform: translateX(0);
        opacity: 1;
    }
</style>
